<template>
  <div>
    <van-tabs v-model="active"
              type="line"
              :swipeable="swiperFlag"
              @click="mysay">
      <template #nav-left>
        <div>
          <h1 style="color:red;">左侧标题</h1>
        </div>
      </template>
      <van-tab title="裤子">内容 1
        <about></about>
      </van-tab>
      <van-tab title="衣服"
               :dot="true">内容 2</van-tab>
      <van-tab to="/">
        内容 3

      </van-tab>
      <van-tab title="帽子">
        <van-icon color="red"
                  name="like-o"
                  size="40px"></van-icon>
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png"></van-icon>
      </van-tab>
      <van-tab title="帽子">内容 4</van-tab>
      <van-tab title="帽子">内容 4</van-tab>
      <van-tab title="帽子">内容 4
        <template #title>
          <div>
            <div class="xin">新款</div>
          </div>
        </template>
      </van-tab>
      <van-tab title="帽子">
        <van-list>
          <van-cell v-for="(item,index) in mylist"
                    :key="index">
            {{item}}
          </van-cell>
        </van-list>
      </van-tab>

    </van-tabs>
  </div>
</template>
<script>
import About from './About'
export default {
  name: "cart",
  components: {
    About
  },
  data () {
    return {
      active: 2,
      swiperFlag: true,
      mylist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
    }
  },
  methods: {
    mysay (activeIndex) {//点击切换形参收集下标
      console.log(activeIndex)
    }
  }
}
</script>
<style lang="less">
.xin {
  width: 50px;
  height: 50px;
  background: red;
}
.van-cell__value {
  text-align: center !important;
}
</style>
